﻿<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>数据分析</title>
    <script src="/webjars/miniui/boot.js" type="text/javascript"></script>
    <script src="/static/js/common/common.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/js/main-page/echarts.min.js"></script>
    <link href="/static/css/resource.css" rel="stylesheet" type="text/css" />
    <link href="/webjars/miniui/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/default.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/css/main-page/g-reset.css" />
    <style type="text/css">
        body {
            margin:0;
            padding:0;
            border:0;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .discell {
            text-align:right;
            width:80px;
        }
        .input {
            width:400px;
        }
        .mt-24 {
            margin-bottom:24px;
        }
        .AnalysContent {
            background:#fff;
            padding:16px 20px;
        }
        .mini-grid-rows-view {
            overflow-x:hidden;
        }
    </style>
</head>
<body>
<div class="mini-fit" style="height:100%;width: 100%;overflow-x: auto;overflow-y: auto;" id="form1" name="form1">
    <div class="mini-splitter" style="width:100%;height:100%;">
        <div size="15%" showCollapseButton="true">
            <div id="fxnr"
                 style="height: 40px;font-weight: bold;font-size: 14px;line-height: 40px;font-family: 'Microsoft Yahei';border-bottom: 1px solid #dfdfdf;padding-left: 12px;">
                分析内容
            </div>
            <div style="display: flex;flex-wrap: wrap;margin-left: 10px;" id="categorys">
                <#list categoryList as categorys>
                    <div id="${categorys.name!''}" name="item" class="mini-tree"
                         url="/azbj/sjtjfx/sjfx/category?parentCode=${categorys.code!''}"
                         showTreeIcon="false" showFolderCheckBox="false" showCheckBox="true" autoCheckParent="false"
                         allowSelect="false" showArrow="true" checkRecursive="false" resultAsTree="false"
                         expandOnNodeClick="true" onbeforeload="onBeforeTreeLoad" checkOnTextClick="true"
                         idField="code" parentField="pcode" textField="name" onbeforeexpand="onBeforeExpand"
                         onnodecheck="getCheckedNodes" onexpand="expaned('${categorys.name!''}')"
                         style="width: 100%;">
                    </div>
                </#list>
            </div>
        </div>
        <div showCollapseButton="true" style="width:100%;height:100%;overflow-y:auto">
            <div id="fxfw"
                 style="height: 40px;font-weight: bold;font-size: 14px;line-height: 40px;font-family: 'Microsoft Yahei';border-bottom: 1px solid #dfdfdf;padding-left: 12px;">
                分析范围
            </div>
            <div id="div1">
                <table style="border-collapse:separate; border-spacing:10px;">
                    <tbody>
                    <tr>
                        <td class="discell">已选统计项:</td>
                        <td colspan="4">
                            <input class="mini-textboxlist" id="tbl" textName="tblName" style="width:88%;"
                                   valueFromSelect="false" onremoveitem="removeitems"
                                   valueField="id" textField="text" allowInput="false" inputMode="false">
                            <a class="mini-button" onclick="cancel()">重置</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="discell">地区范围:</td>
                        <td style="color: red;font-size: 12px">
                            <input class="mini-combobox" emptyText="请选择..."
                                   width="400" ; textField="name" valueField="id"
                                   url="/azbj/sjtjfx/sjfx/dqfw" multiSelect="true"
                                   showClose="true" oncloseclick="onCloseClick" onvaluechanged="onvaluechanged"
                                   id="dqfw" name="dqfw"
                            >&nbsp;&nbsp;（最多选择4条）
                        </td>
                        <td class="discell">时间范围:</td>
                        <td>
                            <input property="editor" class="mini-monthpicker" id="begin" name="begin" allowInput="true"
                                   emptyText="开始日期" style="width: 100%;" />
                        </td>
                        <td>
                            <input property="editor" class="mini-monthpicker" id="end" name="end" allowInput="true"
                                   emptyText="结束日期" style="width: 100%;" />
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;" colspan="5" class="echarts-show">
                            <img src="/static/images/azbj/zz1.png" alt="柱状图加载失败" class="zzt" />
                            <img src="/static/images/azbj/z2.png" alt="折线图加载失败" class="zxt" />
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;" colspan="5">
                            <a class="mini-button" onclick="fenxi()">分析</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div showCollapseButton="true" class="mini-fit" style="overflow-y:auto">
                <div class="AnalysContent mt-24" id="histogramcharts"> <#--柱状图的div-->
                    <ul id="histogram" class="clearfix">
                    </ul>
                </div>
                <div class="AnalysContent mt-24" style="display:none" id="linegramcharts"> <#--折线图的div-->
                    <ul id="linegram" class="clearfix">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    mini.parse();
    var nodes = [];  // 选取节点的id
    var texts = [];  // 选取节点的name
    var dqfw = mini.get("dqfw");
    var tbl = mini.get("tbl");
    var begin = mini.get("begin"); // 开始时间
    var end = mini.get("end");    // 结束时间
    var dqfwids = []; // 选择的地区
    var codes = [];
    var codeNames = [];
    var returnResults = []; // 统计返回的结果
    var xAxisval; // x轴的数据
    var map;
    var sxvalues = [];

    function onBeforeTreeLoad(e) {
        var tree = e.sender;    //树控件
        var node = e.node;      //当前节点
        var params = e.params;  //参数对象
    }

    $(function () {
        $('.echarts-show .zzt').click(function () {
            $('.echarts-show .zzt').attr('src', '/static/images/azbj/zz1.png');
            $('.echarts-show .zxt').attr('src', '/static/images/azbj/z2.png');
            $('.echarts-show .bzt').attr('src', '/static/images/azbj/b2.png');
            // 删除统计图中的li标签
            remobeLi("histogram");
            remobeLi("linegram");
            document.getElementById("histogramcharts").style.display = "block";
            document.getElementById("linegramcharts").style.display = "none";
            var tblval = tbl.getValue();
            var tblArr = tblval.split(",");
            for (var i = 0; i < tblArr.length; i++) {
                changeHtml("histogram", map.get(tblArr[i]).code, map.get(tblArr[i]).codeName, map.get(tblArr[i]).result, xAxisval); //生成柱状图
            }
        });
        $('.echarts-show .zxt').click(function () {
            $('.echarts-show .zzt').attr('src', '/static/images/azbj/zz2.png');
            $('.echarts-show .zxt').attr('src', '/static/images/azbj/z1.png');
            $('.echarts-show .bzt').attr('src', '/static/images/azbj/b2.png');
            // 删除统计图中的li标签
            remobeLi("histogram");
            remobeLi("linegram");
            document.getElementById("histogramcharts").style.display = "none";
            document.getElementById("linegramcharts").style.display = "block";
            var tblval = tbl.getValue();
            var tblArr = tblval.split(",");
            for (var i = 0; i < tblArr.length; i++) {
                changeHtml("linegram", map.get(tblArr[i]).code, map.get(tblArr[i]).codeName, map.get(tblArr[i]).result, xAxisval); //生成折线图
            }
        });
    })

    $(function () {
        $("div").click(function () {
            var id = $(this).attr("id");
            if (id == "div1") {
                // 折叠起所有的树
                var arr = getDiv("categorys");
                for (var i = 0; i < arr.length; i++) {
                    var tree = mini.get(arr[i]);
                    tree.collapseLevel(0);
                }
            }
        })
    })

    // 下拉复选框设置值为空
    function onCloseClick(e) {
        var obj = e.sender;
        var test = obj.getText().substring(0, obj.getText().lastIndexOf(","));
        var value = obj.getValue().substring(0, obj.getValue().lastIndexOf(","));
        obj.setValue(value);
        obj.setText(test);
        //最多选取四条，如果e.getSelecteds.length > 4 则只取前四条
        var row = dqfw.getSelecteds();
        for (var i = 0; i < row.length; i++) {
            dqfwids.push(row[i]["id"]);
        }
    }

    // 地区范围最多选择四条
    function onvaluechanged(e) {
        legendvalue = [];
        dqfwids = [];
        var row = dqfw.getSelecteds();
        if (row.length > 4) {
            mini.alert("最多选择四条");
            onCloseClick(e);
        } else {
            for (var i = 0; i < row.length; i++) {
                dqfwids.push(row[i]["id"]);
            }
        }
    }

    function fenxi(e) {
        legendvalue = [];
        xAxisval = []; //x轴的数据
        sxvalue = [];  // 扇形图
        returnResult = "";
        zzseriesvalue = [];
        zxseriesvalue = [];
        map = new Map();

        var tblval = tbl.getValue();
        if (tblval == "") {
            mini.alert("请至少选择一个分析内容");
            return;
        }
        if (dqfw.getValue() == "") {
            mini.alert("请至少选择一个地区范围");
            return;
        }
        if (begin.getValue() == "") {
            mini.alert("请选择开始日期");
            return;
        }
        if (end.getValue() == "") {
            mini.alert("请选择结束日期");
            return;
        }
        var myDate = new Date();
        var now = myDate.valueOf();
        if (begin.getValue() > now) {
            mini.alert("开始日期不能大于当前月份");
            return;
        }
        if (end.getValue() > now) {
            mini.alert("结束日期不能大于当前月份");
            return;
        }
        var beginStr = mini.formatDate(begin.getValue(), 'yyyyMM');
        var endStr = mini.formatDate(end.getValue(), 'yyyyMM');
        if (begin.getValue() > end.getValue()) {
            mini.alert("请输入正确区间日期");
            return;
        }
        // 删除ul标签下所有的li标签
        var ul = document.getElementById("histogram");
        while (ul.hasChildNodes()) {
            ul.removeChild(ul.firstChild);
        }

        // 删除统计图中的li标签
        remobeLi("histogram");
        remobeLi("linegram");

        var tblArr = tblval.split(",");

        mini.mask({
            el: document.getElementById("form1"),
            cls: 'mini-mask-loading',
            html: '加载中...'
        });
        var beginStr = mini.formatDate(begin.getValue(), 'yyyy-MM');
        var endStr = mini.formatDate(end.getValue(), 'yyyy-MM');
        for (var i = 0; i < tblArr.length; i++) {
            $.ajax({
                url: "/azbj/sjtjfx/sjfx/analysis",
                type: "POST",
                traditional: true,
                data: {quota: tblArr[i], dqfwids: dqfwids, begin: beginStr, end: endStr},
                success: function (success) {
                    if (success.code == 1) {
                        var result = success.data;
                        var legendvalue = []; // 对分析的地区进行选择
                        //var xAxisval = JSON.parse(result).xAlist; //x轴的数据
                        var sxvalue = JSON.parse(result).sxList;  // 扇形图
                        // var returnResult = JSON.parse(result).rowstest;
                        var zzseriesvalue = [];
                        var zxseriesvalue = [];
                        // Axisval = JSON.parse(result).xAlist;  // x轴的数据
                        // sxvalue = JSON.parse(result).sxList;   // 扇形图的数据
                        var returnResult = JSON.parse(result).rowstest; // 展示结果
                        xAxisval = JSON.parse(result).xAlist;
                        // 对returnResult进行处理
                        for (var i = 0; i < returnResult.length; i++) {
                            legendvalue.push(returnResult[i].name);
                        }
                        var code = JSON.parse(result).code;
                        var codeName = JSON.parse(result).codeName;
                        var b = {};
                        b.code = code;
                        b.codeName = codeName;
                        b.result = returnResult;
                        b.sxvalue = sxvalue;
                        map.set(code, b);
                        changeHtml("histogram", code, codeName, returnResult, xAxisval); //生成柱状图
                        changeHtml("linegram", code, codeName, returnResult, xAxisval);  //生成折线图
                        /*changeHtml("fanchart", code, codeName, sxvalue, xAxisval);  //生成折线图*/
                        mini.unmask(document.getElementById("form1"));
                    }
                }
            });
        }
    }

    // 关闭一棵树中除选中节点的其他节点
    function onBeforeExpand(e) {
        var tree = e.sender;
        var nowNode = e.node;
        var level = tree.getLevel(nowNode);

        var root = tree.getRootNode();
        tree.cascadeChild(root, function (node) {
            if (tree.isExpandedNode(node)) {
                var level2 = tree.getLevel(node);
                if (node != nowNode && !tree.isAncestor(node, nowNode) && level == level2) {
                    tree.collapseNode(node, true);
                }
            }
        });
    }

    // 获取一级统计项下的所有ID
    function getDiv(id) {
        var arr = [];
        var parentDiv = document.getElementById(id);
        var childs = parentDiv.getElementsByTagName('div');
        for (var i = 0; i < childs.length; i++) {
            if (childs[i].getAttribute("id") != null && checkChinese(childs[i].getAttribute("id"))) {
                arr.push(childs[i].getAttribute("id"));
            }
        }
        return arr;
    }

    // 判断是否为中文
    function checkChinese(val) {
        var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (reg.test(val)) {
            return true;
        }
        return false;
    }

    // 折叠除当前所选中的其他节点
    function expaned(e) {
        var arr = getDiv("categorys");
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] !== e) {
                var tree = mini.get(arr[i]);
                tree.collapseLevel(0);
            }
        }
    }

    // 获取所有树选中的节点
    function getCheckedNodes(e) {
        var arr = getDiv("categorys");
        nodes = [];
        texts = [];
        for (var i = 0; i < arr.length; i++) {
            var tree = mini.get(arr[i]);
            var value = tree.getValue(false);
            var text = tree.getText(false);
            if (value != "") {
                nodes.push(value);
                texts.push(text);
            }
        }
        var nodesStr = nodes.join(",");
        var textsStr = texts.join(",");
        var nodeArr = nodesStr.split(",");
        var textArr = textsStr.split(",");
        if (nodeArr.length > 4) { // 最多选择四个节点 , 选中节点大于四个时候，取消当前选中的节点
            var tree1 = e.sender;
            var nowNode = e.node;
            tree1.uncheckNode(nowNode);
            nodeArr = deleteArr(nodeArr, nowNode.code);
            textArr = deleteArr(textArr, nowNode.name);
            mini.alert("最多选择四个分析内容");
        }
        nodes = nodeArr;
        texts = textArr;
        setBoxValue(nodeArr.join(","), textArr.join(","));
    }

    //
    function setBoxValue(val, text) {
        var t = mini.get("tbl");
        t.setValue(val);
        t.setText(text);
    }

    // 删除数组中指定的值
    function deleteArr(arr, str) {
        var index = arr.indexOf(str);
        arr.splice(index, 1);
        return arr;
    }

    function removeitems(e) {
        var tbl = mini.get("tbl").getValue().split(",");
        var nodesArr = nodes.join(",").split(",");
        var remval = getArrDifference(tbl, nodesArr);
        var remvaltem = remval.join(",").replace(",", "")
        nodes = deleteArr(nodesArr, remvaltem);
        var arr = getDiv("categorys");
        for (var i = 0; i < arr.length; i++) {  // 遍历所有的树
            var tree = mini.get(arr[i]);
            var value = tree.getValue(false);
            if (value.indexOf(remval.join(",").replace(",", "")) != -1) {
                tree.uncheckNode(tree.getNode(remval.join(",").replace(",", "")));
            }
        }
    }

    // 取出两个数组中不同的元素
    function getArrDifference(arr1, arr2) {
        return arr1.concat(arr2).filter(function (v, i, arr) {
            return arr.indexOf(v) === arr.lastIndexOf(v);
        });
    }

    function cancel() { // 取消所用选中的统计项
        var arr = getDiv("categorys");
        for (var i = 0; i < arr.length; i++) {  // 遍历所有的树
            var tree = mini.get(arr[i]);
            var node = tree.getAllChildNodes(tree.getRootNode());
            tree.uncheckNodes(node);
        }
        nodes = [];
        texts = [];
        mini.get("tbl").setValue();
    }

    // 通过JS动态修改HTML元素 柱状图
    function changeHtml(type, code, codeName, returnResult, xAxisval) {
        var ul = document.getElementById(type);
        var li = document.createElement("li");
        li.setAttribute("class", "fl");
        li.setAttribute("style", "width: 50%;height: 400px;margin:20px 0");
        var div = document.createElement("div");
        if (type == "histogram") {
            div.setAttribute("id", "histogory" + code);
            div.setAttribute("style", "height: 100%;width: 100%");
            li.appendChild(div);
            ul.appendChild(li);
            createBarChart("histogory" + code, codeName, returnResult, xAxisval);
        }
        if (type == "linegram") {
            div.setAttribute("id", "linegram" + code);
            div.setAttribute("style", "height: 100%;width: 100%;");
            li.appendChild(div);
            ul.appendChild(li);
            createLineChart("linegram" + code, codeName, returnResult, xAxisval);
        }
    }

    // 生成柱状图
    function createBarChart(code, codeName, returnResult, xAxisval) {
        var divElement = echarts.init(document.getElementById(code));
        var legendvalue = [];
        var zzseriesvalue = [];
        for (var i = 0; i < returnResult.length; i++) {
            legendvalue.push(returnResult[i].name);
            var obj = {};
            obj.name = returnResult[i].name;
            obj.type = "bar";
            obj.data = returnResult[i].data;
            obj.barWidth = '10%';
            zzseriesvalue.push(obj);
        }

        var option = {
            title: {
                text: codeName,
                left: 'center',
                textStyle: {
                    fontSize: 15,
                    fontWeight: '1000',
                }
            },
            color: ['#3398DB', '#6880DB', '#7370DB', '#7750DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为:'line' | 'shadow'
                }
            },
            legend: {
                data: legendvalue,
                left: 'left',
                orient: 'vertical'
            },
            grid: {
                left: '25%',
                right: '4%',
                bottom: '1%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxisval,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        rotate: 40
                    }
                }
            ],
            yAxis: [
                {
                    min: 0,
                    interval: 500,
                    type: 'value'
                }
            ],
            series: zzseriesvalue

        };
        divElement.setOption(option, true);
    }

    // 生成折线图
    function createLineChart(code, codeName, returnResult, xAxisval) {
        var divElement = echarts.init(document.getElementById(code));
        var legendvalue = [];
        var zxseriesvalue = [];
        for (var i = 0; i < returnResult.length; i++) {
            legendvalue.push(returnResult[i].name);
            var obj = {};
            obj.name = returnResult[i].name;
            obj.type = "line";
            obj.data = returnResult[i].data;
            zxseriesvalue.push(obj);
        }
        //指定图表的配置项和数据
        var option = {
            title: {
                text: codeName,
                left: 'center',
                textStyle: {
                    fontSize: 15,
                    fontWeight: '1000',
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '25%',
                right: '4%',
                bottom: '1%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: xAxisval,
                axisLabel: {
                    rotate: 40
                }
            },
            legend: {
                data: legendvalue,
                left: 'left',
                orient: 'vertical'
            },
            yAxis: {
                type: 'value'
            },
            series: zxseriesvalue
        };
        divElement.setOption(option, true);
    }

    // 删除ul标签中的所有li标签
    function remobeLi(type) {
        var ul = document.getElementById(type);
        while (ul.hasChildNodes()) {
            ul.removeChild(ul.firstChild);
        }
    }
</script>
</body>
<script type="text/javascript">
</script>
</html>